<template>
	<div class="myImg" v-show="!item.common.isHidden" @tap="handleTap" :style="picCommonStyle + picInnerStyle" :class="{ needShare: shareInfo.hasShare, hasBg: !item.style.icon && loadError }">
		<button open-type="share" class="share" v-if="shareInfo.hasShare" :data-share="shareInfo.shareInfo">
			<image lazy-load :src="item.common.src" :mode="item.style.mode" v-if="!item.style.icon" @load="loadSuccess" @error="loadFail"></image>
			<u-icon class="error" name="error-circle" size="32" v-if="!item.style.icon && loadError"></u-icon>
		</button>
		<image lazy-load :src="item.common.src" :mode="item.style.mode" v-if="!shareInfo.hasShare && !item.style.icon" @load="loadSuccess" @error="loadFail"></image>
		<u-icon class="error" name="error-circle" size="32" v-if="!shareInfo.hasShare && !item.style.icon && loadError"></u-icon>
	</div>
</template>

<script>
	import { handleEvent } from '../libs/utils.js'
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myImg',
		props:{
			listData: null,
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data(){
			return {
				item: {common: {},style: {}},
				loadError: false
			}
		},
		inject: ['options'],
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed:{
			shareInfo(){
				var item = this.item
				var shareInfo = {},hasShare = false;
				if (item.event) {
					hasShare = item.event.some(e => {
						if (e.type === 'sharePage') {
							shareInfo = e;
							// 如果此分享按钮上也绑定了发送链接的埋点,那么要把埋点配置也放到分享配置里去
							var buriedPointConfig = item.event.filter(e=>e.type === 'buriedPoint'&&e.itemCode === '001001')
							var tranConfig = buriedPointConfig.length > 0 ? buriedPointConfig[0] : undefined
							shareInfo.tranConfig = tranConfig
							return true;
						}
					});
				}
				return { hasShare, shareInfo };
			},
			picWidth(){
				var item = this.item
				// 如果图片采用了皮肤图标，则宽度要增加4，以修正皮肤参数换算之后的误差
				return (item.style.icon && item.common.width<=746) ? (item.common.width+4):item.common.width
			},
			picHeight(){
				var item = this.item
				// 如果图片采用了皮肤图标，则高度要增加4，以修正皮肤参数换算之后的误差
				return item.style.icon ? (item.common.height+4) : item.common.height
			},
			picCommonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH,{
					width: this.picWidth,
					height: this.picHeight
				})
			},
			picInnerStyle() {
				var pic = this.item
				var skinIconStyle = 'opacity:' + pic.style.opacity + ';background-color:'+pic.style.bgColor+';';
				skinIconStyle += this.iconSkinStyle
				var radius = this.picCalcRadius
				skinIconStyle += 'border-top-left-radius:' + radius.lt + 'rpx;border-top-right-radius:' + radius.rt + 'rpx;border-bottom-right-radius:' + radius.rb + 'rpx;border-bottom-left-radius:' + radius.lb + 'rpx;'
				return skinIconStyle
			},
			iconSkinStyle(){
				var pic = this.item,skinIconStyle = '';
				if (pic.style.icon) {
					var skinUrl = this.ifCustomSkin ? this.$skinUrl : ''
					// var skinUrl = this.ifCustomSkin ? this.$skinUrl : (this.ifAniSkin ? this.$aniUrl : '')
					skinIconStyle +=
						'background-image:url(' + skinUrl + ');' +
						'background-size:' + this.picSkinSize.width * this.picRatio1 + 'rpx ' + this.picSkinSize.height * this.pciRatio2 + 'rpx;' +
						'background-position:' + this.picLeft + 'rpx ' + this.picTop + 'rpx;';
				}
				return skinIconStyle
			},
			picRatio1() {
				var pic = this.item
				return pic.common.width / this.iconW;
			},
			pciRatio2() {
				var pic = this.item
				return pic.common.height / this.iconH;
			},
			picLeft() {
				return -this.iconX * this.picRatio1;
			},
			picTop() {
				return -this.iconY * this.pciRatio2;
			},
			iconW(){
				return this.icon.width
			},
			iconH(){
				return this.icon.height
			},
			iconX(){
				return this.icon.x
			},
			iconY(){
				return this.icon.y
			},
			icon(){
				var pic = this.item;
				var icons = this.ifCustomSkin ? this.$icons : [];
				// var icons = this.ifCustomSkin ? this.$icons : (this.ifAniSkin ? this.$aniIcons : []);
				return icons[pic.style.iconFileParam] || {}
			},
			ifCustomSkin(){
				var pic = this.item
				return !pic.style.iconFileName || pic.style.iconFileName === 'customSkin'
			},
			// ifAniSkin(){
			// 	var pic = this.item
			// 	return pic.style.iconFileName === 'customAni'
			// },
			picSkinSize() {
				return {
					width: this.ifCustomSkin ? this.$skinW : 0,
					height: this.ifCustomSkin ? this.$skinH : 0
					// width: this.ifCustomSkin ? this.$skinW : (this.ifAniSkin ? this.$aniW : 0),
					// height: this.ifCustomSkin ? this.$skinH : (this.ifAniSkin ? this.$aniH : 0)
				};
			},
			picCalcRadius(){
				return {
					lt: this.picRadiusLt,
					rt: this.picRadiusRt,
					rb: this.picRadiusRb,
					lb: this.picRadiusLb
				}
			},
			picRadiusLt() {
				var pic = this.item
				return pic.style.radius_lt >= 0 ? pic.style.radius_lt : pic.style.borderRadius;
			},
			picRadiusRt() {
				var pic = this.item
				return pic.style.radius_rt >= 0 ? pic.style.radius_rt : pic.style.borderRadius;
			},
			picRadiusRb() {
				var pic = this.item
				return pic.style.radius_rb >= 0 ? pic.style.radius_rb : pic.style.borderRadius;
			},
			picRadiusLb() {
				var pic = this.item
				return pic.style.radius_lb >= 0 ? pic.style.radius_lb : pic.style.borderRadius;
			}
		},
		methods:{
			loadSuccess(){
				this.loadError = false
			},
			loadFail(){
				this.loadError = true
			},
			handleTap(){
				this.picTap();
				handleEvent(this.item.event, this.listData || {}, this.pageConfig, this.options);
			},
			picTap() {
				var pic = this.item
				if (pic.style.ifPreview) {
					uni.previewImage({
						urls: [pic.common.src]
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.myImg {
		position: absolute;
		box-sizing: border-box;
		background-repeat: no-repeat;
		overflow: hidden;
		&.hasBg{
			background-color: #f3f4f6;
		}
		image{
			width: 100%;
			height: 100%;
			display: block;
		}
		.error{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
		&.needShare:active {
			opacity: 0.6 !important;
		}
		.share {
			border: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			border-radius: 0;
			font-size: unset;
			text-align: unset;
			line-height: unset;
			color: unset;
			background-color: unset;
			&::after {
				display: none;
			}
		}
	}
</style>
